import 'package:flutter/material.dart';

class FlowItemWidget extends StatefulWidget {
  const FlowItemWidget({Key key}) : super(key: key);

  @override
  _FlowItemWidgetState createState() => _FlowItemWidgetState();
}

class _FlowItemWidgetState extends State<FlowItemWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30),
          bottomLeft: Radius.circular(30),
          topRight: Radius.circular(4),
          bottomRight: Radius.circular(4),
        ),
        child: Container(
          height: 60,
          color: Colors.white,
          child: Row(
            children: [
              SizedBox(width: 5),
              // 左边照片
              buildImageWidget(),
              SizedBox(width: 10),
              // 中间文字
              buildContentWidget(),
              // 右边关注按钮
              buildFllowWidget(),
              SizedBox(width: 20),
            ],
          ),
        ),
      ),
    );
  }

  buildImageWidget() {
    return ClipOval(
      child: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          color: Colors.grey,
        ),
        child: Image.asset("images/3.0/logo.jpg"),
      ),
    );
  }

  buildContentWidget() {
    return Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "我是主要的内容",
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
          ),
          Text(
            "我是描述性内容",
            style: TextStyle(
              fontSize: 14,
            ),
          )
        ],
      ),
    );
  }

  buildFllowWidget() {
    return ClipRRect(
      borderRadius: BorderRadius.all(
        Radius.circular(40),
      ),
      child: GestureDetector(
        onTap: () {
          print("点击了关注");
        },
        child: Container(
          alignment: Alignment.center,
          width: 50,
          height: 30,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(30)),
            gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Colors.green,
                  Colors.pink,
                ]),
          ),
          child: Text(
            "关注",
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}
